<template>
	<view>
		<u-tabbar :value="active" @change="change" activeColor="#333333" :border="false" inactiveColor="transparent"
			:fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item v-for="(item,index) in list" :text="item.name">
				<image class="u-page__item__slot-icon" mode="aspectFit" width="35rpx" height="35rpx" slot="active-icon"
					:src="item.active"></image>
				<image class="u-page__item__slot-icon" mode="aspectFit" width="35rpx" height="35rpx"
					slot="inactive-icon" :src="item.inactive"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props: {
			active: {
				type: Number,
				default: 0
			},
		},
		onLoad() {			
			// uni.hideTabBar()
		},
		data() {
			return {
				list: [{
					name: '•',
					url: '/pages/index/index',
					active: '../../static/image/a_home.png',
					inactive: '../../static/image/a_home.png'
				},
				{	
					name: '•',
					url: '/pages/mine/noticeList',
					active: '../../static/image/a_notice.png',
					inactive: '../../static/image/a_notice.png'
					
				},				
				{
					name: '•',
					url: '/pages/mine/personal',
					active: '../../static/image/a_user.png',
					inactive: '../../static/image/a_user.png'
				}],
			};
		},
		methods: {
			change(e) {
				uni.switchTab({
					url: this.list[e].url,
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-page__item__slot-icon {
		width: 50rpx;
		height: 50rpx;
		// margin-bottom: 5rpx;
	}

	/deep/.u-tabbar--fixed {
		border-top-left-radius:40rpx ;
		border-top-right-radius:40rpx ;
		// border-top: 2px solid rgba(255, 255, 255, 0.7);
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(30px);
	}
	/deep/.u-tabbar__content__item-wrapper{
		height: 60px;
	}
	/deep/ .uni-tabbar,
	/deep/ .uni-tabbar-bottom {
		// box-shadow: 3px,5px,10px,1px,#aa55ff;
		z-index: 100000;
		padding-bottom: 40rpx;
	}
</style>
